﻿<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="renderer" content="webkit">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>我要提问</title>

  <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="../bower_components/font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="../bower_components/summernote/dist/summernote-bs4.min.css">
  <link rel="stylesheet" href="../bower_components/select2/dist/css/select2.min.css">
  <link rel="stylesheet" href="../bower_components/select2-bootstrap4-theme/dist/select2-bootstrap4.min.css">
  <link rel="stylesheet" href="../bower_components/vue-select/dist/vue-select.css">

  <script src="../bower_components/jquery/dist/jquery.min.js"></script>
  <script src="../bower_components/popper.js/dist/umd/popper.min.js"></script>
  <script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
  <script src="../bower_components/polyfill/dist/polyfill.min.js"></script>
  <script src="../bower_components/summernote/dist/summernote-bs4.js"></script>
  <script src="../bower_components/summernote/dist/lang/summernote-zh-CN.min.js"></script>
  <script src="../bower_components/vue/dist/vue.js"></script>
  <script src="../bower_components/select2/dist/js/select2.min.js"></script>
  <script src="../bower_components/select2/dist/js/i18n/zh-CN.js"></script>
  <script src="../bower_components/vue-select/dist/vue-select.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<header class="container-fluid mb-3 bg-light">

  <nav class="navbar navbar-expand-lg   navbar-light bg-light">
    <a class="navbar-brand" href="../index.html"> <img alt="达内知道"
                                                       src="../img/straw_logo_239x80.png" height="33">
    </a>
    <button class="navbar-toggler" type="button"
            data-toggle="collapse" data-target="#navbarNavAltMarkup"
            aria-controls="navbarNavAltMarkup" aria-expanded="false"
            aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav">
        <a class="nav-item nav-link active" href="../index.html">首页</a>
        <a class="nav-item nav-link active" href="../personal/myQuestion.html">提问</a>
        <a class="nav-item nav-link active" href="../personal/task.html">任务</a>
        <a class="nav-item nav-link active" href="../personal/collect.html">收藏</a>
      </div>

    </div>

    <div class="form-inline my-2 my-lg-0" id="searchApp">
      <input class="form-control form-control-sm mr-sm-2 rounded-pill" v-model="keyword" type="search"
             placeholder="Search"  aria-label="Search">
      <button class="btn btn-sm btn-outline-secondary my-2 my-sm-0 rounded-pill" type="button" ><i
              class="fa fa-search" aria-hidden="true"></i></button>
    </div>
    <a type="button" class="btn btn-outline-primary btn-sm mx-2" href="../question/create.html">我要提问</a>
    <div id="noticeCount">
      <button type="button" class="btn btn-default btn-xs fa fa-bell-o" data-toggle="modal" data-target="#noticeModal">
        <span class="badge badge-warning badge-pill">2</span>
      </button>
    </div>
    <div class="dropdown   py-1 mr-3 ">
      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown"
              aria-haspopup="true" aria-expanded="false">
        <img style="width: 30px;height: 30px;border-radius: 50%;"
             src="../img/user.jpg">
      </button>
      <div class="dropdown-menu dropdown-menu-sm-left text-sm border-0" aria-labelledby="dropdownMenu2">
        <a class="dropdown-item " href="../personal/userInfo.html">账号设置</a>
        <div class="dropdown-divider"></div>
        <button data-toggle="modal" data-target="#invitecodeModal" class="dropdown-item btn-default">查看邀请码
        </button>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item " href="../login.html">注销登录</a>
      </div>
    </div>
  </nav>
  <!-- 消息modal-->
  <div class="modal fade" id="noticeModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
       aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">

        <div class="modal-body">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          <div id="myTab" role="tablist" class="nav nav-tabs">
              <a href="#commentNotice" class="nav-item nav-link active text-black" data-toggle="tab"
                 aria-controls="commentNotice" aria-selected="true">
                通知
              </a>
              <a href="#announcement" class="nav-item nav-link text-black" data-toggle="tab" aria-controls="announcement"
                 aria-selected="true">
                公告
              </a>
          </div>
          <div id="myTabContent" class="tab-content col-12">
            <div class="tab-pane fade show active row" id="commentNotice" role="tabpanel"
                 aria-labelledby="noAnswer-tab">
              <div class="list-group list-group-flush">
                <h6 class="text-dark my-2" style="display: none" >暂无新消息！</h6>
                <a href="../notice/all.html" style="display: none" class="text-info" >查看历史消息</a>
                <!--只显示10条消息-->
                <div class="list-group-item list-group-item-action">
                  <span>张三</span>
                  <strong style="display: none">回答了你的问题</strong>
                  <strong style="display: none">评论了您的回答</strong>
                  <strong style="display: none">评论了您的提问</strong>
                  <strong>向您提问</strong>
                  <a href="" class="text-info">Java中方法重载和重写的区别</a>
                </div>
              </div>
              <div class="col-12 mt-2 ">
                <a href="../notice/all.html" class="text-info">查看全部消息</a>
              </div>
            </div>
            <div class="tab-pane fade row" id="announcement" role="tabpanel" aria-labelledby="unSolve-tab">
              <p class="text-black mt-2">暂无公告！</p>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        </div>
      </div>
    </div>
  </div><!-- 消息modal-->
  <!-- 查看邀请码modal-->
  <div class="modal fade" id="invitecodeModal" tabindex="-1" role="dialog" aria-labelledby="invitecodeModal"
       aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">

        <div class="modal-body">
          <table class="table">
            <thead>
            <tr>
              <th scope="col">#</th>
              <th scope="col">班级</th>
              <th scope="col">邀请码</th>
              <th scope="col">有效期至</th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <th scope="row">1</th>
              <td>JSD1912</td>
              <td>JSD1912-697441</td>
              <td>2020-05-18 23:26:05</td>
            </tr>
            <tr>
              <th scope="row">2</th>
              <td>JSD2001</td>
              <td>JSD2001-216850</td>
              <td>2020-05-18 23:26:05</td>
            </tr>
            <tr>
              <th scope="row">3</th>
              <td>JSD2002</td>
              <td>JSD2002-563302</td>
              <td>2020-05-18 23:26:05</td>
            </tr>
            <tr>
              <th scope="row">4</th>
              <td>JSD2003	</td>
              <td>JSD2003-285267</td>
              <td>2020-05-18 23:26:05</td>
            </tr>
            </tbody>
          </table>

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        </div>
      </div>
    </div>
  </div><!-- 查看邀请码modal-->
</header>
<div class="container-fluid bg-white mt-3">
  <div class="row">
    <div class="col-9 px-0 ">
      <div class="container-fluid bg-light" id="questionApp">
        <div class="row">
          <div class="col-2 px-0  ">
            <div class="container-fluid ">
              <div class="row  mt-4 mx-0 px-0" >
                <a class="btn btn-outline-danger btn-md rounded-lg fa fa-close " style="font-size: x-small">删除</a>
              </div>

              <div class="row mt-4 mx-0 px-0" >
                <a class="btn btn-outline-primary btn-md rounded-lg fa fa-edit " style="font-size: x-small"
                   href="../question/edit.html">编辑</a>
              </div>
              <div class="row mt-4 mx-0 px-0">
                <a class="btn btn-outline-info btn-md rounded-lg fa fa-pencil " style="font-size: x-small"
                   href="#writeAnswer">回答</a>
              </div>
              <div class="row mt-4 mx-0 px-0" id="collectApp">
                <a class="btn btn-outline-secondary btn-md rounded-lg fa fa-star "
                    style="font-size: x-small">收藏</a>
                <a  class="btn btn-outline-secondary btn-md rounded-lg fa fa-star "
                    style="font-size: x-small;display: none" >已收藏</a>
              </div>

            </div>

          </div>
          <div class="col-10 px-0">
            <div class="container-fluid ">
              <div class="row px-0 mb-3">
                <div class="col-9 px-0">
                  <a class="badge badge-pill badge-info mx-1"
                     href="../tag/tag_question.html"
                     v-for="tag in question.tags"
                     v-text="tag.name" >Java基础</a>
                </div>
                <div class="col-3 px-0">
                  <div class="row px-0">

                    <div class="col border-right text-right">
                      <p class="font-weight-light mb-0">收藏</p>
                      <p class="font-weight-bold mt-1">1</p>
                    </div>
                    <div class="col">
                      <p class="font-weight-light mb-0">浏览</p>
                      <p class="font-weight-bold mt-1"
                       v-text="question.pageViews">100</p>
                    </div>
                  </div>
                </div>
              </div>
              <p class=" px-0 text-center font-weight-bold" style="font-size: x-large"
                v-text="question.title">
                Java中方法重载和重写的区别
              </p>
              <div class="px-0 container-fluid question-content"
                v-html="question.content">
                请问的方法中重写和重载的区别都是什么，如何使用
              </div>
              <p class="text-right px-0 mt-5">
                <span class="font-weight-light badge badge-primary"
                  v-text="question.userNickName">张三</span>
                <span class="font-weight-light badge badge-info"
                  v-text="question.duration">3天前</span>
              </p>
            </div>

          </div>
        </div>
      </div>
      <div class="container-fluid">
        <div class="row">
          <div class="col-12">
            <!--列出所有的答案-->
            <div class="row mt-5 ml-2" id="answersApp">
              <div class="col-12">
                <div class="well-sm">
                  <h3>
                    <span v-text="answers.length">3</span>
                    条回答</h3>
                </div>
                <div class="card card-default my-5"
                  v-for="answer in answers">
                  <!-- Default panel contents -->
                  <div class="card-header">
                    <div class="row">
                      <div class="col-1">
                        <img style="width: 50px;height: 50px;border-radius: 50%;"
                             src="../img/user.jpg">
                      </div>
                      <div class="col-8 ">
                        <div class="row">
                          <span class="ml-3"
                            v-text="answer.userNickName">张三</span>
                        </div>
                        <div class="row">
                          <span class="ml-3"
                            v-text="answer.duration">2天前</span>
                        </div>

                      </div>
                      <div class="3">

                      </div>
                    </div>
                  </div>
                  <div class="card-body ">
                    <span class="question-content text-monospace" v-html="answer.content">
                      方法的重载是overloading，方法名相同，参数的类型或个数不同，对权限没有要求
                      方法的重写是overrding 方法名称和参数列表，参数类型，返回值类型全部相同，但是所实现的内容可以不同，一般发生在继承中
                    </span>
                    <a class="text-primary ml-2" style="font-size: small"
                       href="../answer/edit.html">
                      <i class="fa fa-edit"></i>编辑
                    </a>

                    <a class="ml-2  fa fa-close " style="font-size: small">
                      删除
                    </a>

                  </div>
                  <div class="card-footer">
                    <p class="text-success fa fa-comment">
                      <span v-text="answer.comments.length">1</span>条评论
                    </p>
                    <ul class="list-unstyled mt-3">
                      <li class="media my-2"
                          v-for="(comment,index) in answer.comments">
                        <img style="width: 50px;height: 50px;border-radius: 50%;"
                             src="../img/user.jpg" class="mr-3"
                             alt="...">
                        <div class="media-body">
                          <h6 class="mt-0 mb-1">
                            <span v-text="comment.userNickName">李四</span>:</h6>
                          <p class="text-dark">
                            <span class="text-monospace"
                              v-text="comment.content">
                              明白了,谢谢老师！
                            </span>
                            <span class="font-weight-light text-info"
                                  style="font-size: small"></span>
                            <a class="text-primary ml-2"
                               style="font-size: small" data-toggle="collapse" href="#editCommemt1"
                               role="button" aria-expanded="false" aria-controls="collapseExample"
                               v-bind:href="'#editComment'+comment.id">
                              <i class="fa fa-edit"></i>编辑
                            </a>
                            <!--老师角色或者属于本用户的评论可以删除该评论-->
                            <a class="ml-2  fa fa-close " style="font-size: small"
                               data-toggle="collapse"  role="button"
                               aria-expanded="false" aria-controls="collapseExample"
                               onclick="$(this).next().toggle(300)">
                              删除
                            </a>
                            <a class="badge badge-pill badge-danger text-white"
                              style="display: none; cursor: pointer"
                              @click="removeComment(comment.id,index,answer.comments)">
                              <i class="fa fa-close"></i>
                            </a>

                          </p>
                          <div class="collapse" id="editCommemt1"
                            v-bind:id="'editComment'+comment.id">
                            <div class="card card-body border-light">
                              <form action="" method="post" class="needs-validation"
                                    novalidate
                                    v-on:submit.prevent="updateComment(comment.id,
                                                    answer.id,index,answer.comments)">
                                <div class="form-group">
                                  <textarea class="form-control"
                                            id="textareaComment1" name="content" rows="4"
                                            required v-text="comment.content"></textarea>
                                  <div class="invalid-feedback">
                                    内容不能为空！
                                  </div>
                                </div>
                                <button type="submit" class="btn btn-primary my-1 float-right">提交修改</button>
                              </form>
                            </div>
                          </div>
                        </div>
                      </li>

                    </ul>
                    <p class="text-left text-dark">
                      <a class="btn btn-primary mx-2"
                         href="#">采纳答案</a>
                      <a class="btn btn-outline-primary" data-toggle="collapse" href="#collapseExample1"
                         role="button" aria-expanded="false" aria-controls="collapseExample"
                          v-bind:href="'#addComment'+answer.id">
                        <i class="fa fa-edit"></i>添加评论
                      </a>
                    </p>
                    <div class="collapse" id="collapseExample1"
                      v-bind:id="'addComment'+answer.id">
                      <div class="card card-body border-light">
                        <form action="#" method="post" class="needs-validation"
                              novalidate
                              v-on:submit.prevent="postComment(answer.id)">
                          <div class="form-group">
                            <textarea class="form-control" name="content" rows="3" required></textarea>
                            <div class="invalid-feedback">
                              评论内容不能为空！
                            </div>
                          </div>
                          <button type="submit" class="btn btn-primary my-1 float-right">提交评论</button>
                        </form>
                      </div>
                    </div>
                  </div>

                </div>
              </div>

            </div><!--列出所有的答案-end-->
            <!--如果没有回答问题的权限就不显示回答框-->
            <div class="container-fluid mt-4" id="postAnswerApp">
              <h5 class="text-info mb-2"><i class="fa fa-edit"></i>写答案</h5>
              <form action="#" method="post"
                    enctype="application/x-www-form-urlencoded"
                    class="needs-validation" novalidate
                    v-on:submit.prevent="postAnswer">
                <div class="form-group">
                  <textarea id="summernote" name="content" required ></textarea>
                  <div class="invalid-feedback"
                    :class="{'d-block':hasError}">
                    <h5 v-text="message">回答内容不能为空！</h5>
                  </div>
                </div>
                <div class="form-group">
                  <p class="text-right">
                    <button type="submit" class="btn btn-primary">提交回答</button>
                  </p>

                </div>
              </form>

            </div>

          </div>

        </div>


      </div>
    </div>


    <div class="col-3">
      <!--相关提问-->
      <div class="container-fluid bg-light pb-2">
        <h5 class=" py-3 font-weight-light"><i class="fa fa-list mr-1" aria-hidden="true"></i>相关提问</h5>
        <div class="list-group list-group-flush" >
          <a href="../question/detail.html" class="list-group-item list-group-item-action">
            <div class="d-flex w-100 justify-content-between">
              <h6 class="mb-1 text-dark" >equals和==的区别是啥</h6>
            </div>
            <div class="row">
              <div class="col-7">
                <small class="mr-2">1条回答</small>
                <small class="text-warning" style="display: none">未回复</small>
                <small class="text-info" style="display: none">未解决</small>
                <small class="text-success">已解决</small>
              </div>
              <div class="col-5 text-right">
                <small>10浏览</small>
              </div>
            </div>
          </a>
        </div>
        <div class="list-group list-group-flush" >
          <a href="../question/detail.html" class="list-group-item list-group-item-action">
            <div class="d-flex w-100 justify-content-between">
              <h6 class="mb-1 text-dark" >equals和==的区别是啥</h6>
            </div>
            <div class="row">
              <div class="col-7">
                <small class="mr-2">1条回答</small>
                <small class="text-warning" style="display: none">未回复</small>
                <small class="text-info" style="display: none">未解决</small>
                <small class="text-success">已解决</small>
              </div>
              <div class="col-5 text-right">
                <small>10浏览</small>
              </div>
            </div>
          </a>
        </div>
        <div class="list-group list-group-flush" >
          <a href="../question/detail.html" class="list-group-item list-group-item-action">
            <div class="d-flex w-100 justify-content-between">
              <h6 class="mb-1 text-dark" >equals和==的区别是啥</h6>
            </div>
            <div class="row">
              <div class="col-7">
                <small class="mr-2">1条回答</small>
                <small class="text-warning" style="display: none">未回复</small>
                <small class="text-info" style="display: none">未解决</small>
                <small class="text-success">已解决</small>
              </div>
              <div class="col-5 text-right">
                <small>10浏览</small>
              </div>
            </div>
          </a>
        </div>
        <div class="list-group list-group-flush" >
          <a href="../question/detail.html" class="list-group-item list-group-item-action">
            <div class="d-flex w-100 justify-content-between">
              <h6 class="mb-1 text-dark" >equals和==的区别是啥</h6>
            </div>
            <div class="row">
              <div class="col-7">
                <small class="mr-2">1条回答</small>
                <small class="text-warning" style="display: none">未回复</small>
                <small class="text-info" style="display: none">未解决</small>
                <small class="text-success">已解决</small>
              </div>
              <div class="col-5 text-right">
                <small>10浏览</small>
              </div>
            </div>
          </a>
        </div>
        <div class="list-group list-group-flush" >
          <a href="../question/detail.html" class="list-group-item list-group-item-action">
            <div class="d-flex w-100 justify-content-between">
              <h6 class="mb-1 text-dark" >equals和==的区别是啥</h6>
            </div>
            <div class="row">
              <div class="col-7">
                <small class="mr-2">1条回答</small>
                <small class="text-warning" style="display: none">未回复</small>
                <small class="text-info" style="display: none">未解决</small>
                <small class="text-success">已解决</small>
              </div>
              <div class="col-5 text-right">
                <small>10浏览</small>
              </div>
            </div>
          </a>
        </div>
        <div class="list-group list-group-flush" >
          <a href="../question/detail.html" class="list-group-item list-group-item-action">
            <div class="d-flex w-100 justify-content-between">
              <h6 class="mb-1 text-dark" >equals和==的区别是啥</h6>
            </div>
            <div class="row">
              <div class="col-7">
                <small class="mr-2">1条回答</small>
                <small class="text-warning" style="display: none">未回复</small>
                <small class="text-info" style="display: none">未解决</small>
                <small class="text-success">已解决</small>
              </div>
              <div class="col-5 text-right">
                <small>10浏览</small>
              </div>
            </div>
          </a>
        </div>
        <div class="list-group list-group-flush" >
          <a href="../question/detail.html" class="list-group-item list-group-item-action">
            <div class="d-flex w-100 justify-content-between">
              <h6 class="mb-1 text-dark" >equals和==的区别是啥</h6>
            </div>
            <div class="row">
              <div class="col-7">
                <small class="mr-2">1条回答</small>
                <small class="text-warning" style="display: none">未回复</small>
                <small class="text-info" style="display: none">未解决</small>
                <small class="text-success">已解决</small>
              </div>
              <div class="col-5 text-right">
                <small>10浏览</small>
              </div>
            </div>
          </a>
        </div>
        <div class="list-group list-group-flush" >
          <a href="../question/detail.html" class="list-group-item list-group-item-action">
            <div class="d-flex w-100 justify-content-between">
              <h6 class="mb-1 text-dark" >equals和==的区别是啥</h6>
            </div>
            <div class="row">
              <div class="col-7">
                <small class="mr-2">1条回答</small>
                <small class="text-warning" style="display: none">未回复</small>
                <small class="text-info" style="display: none">未解决</small>
                <small class="text-success">已解决</small>
              </div>
              <div class="col-5 text-right">
                <small>10浏览</small>
              </div>
            </div>
          </a>
        </div>
        <div class="list-group list-group-flush" >
          <a href="../question/detail.html" class="list-group-item list-group-item-action">
            <div class="d-flex w-100 justify-content-between">
              <h6 class="mb-1 text-dark" >equals和==的区别是啥</h6>
            </div>
            <div class="row">
              <div class="col-7">
                <small class="mr-2">1条回答</small>
                <small class="text-warning" style="display: none">未回复</small>
                <small class="text-info" style="display: none">未解决</small>
                <small class="text-success">已解决</small>
              </div>
              <div class="col-5 text-right">
                <small>10浏览</small>
              </div>
            </div>
          </a>
        </div>
        <div class="list-group list-group-flush" >
          <a href="../question/detail.html" class="list-group-item list-group-item-action">
            <div class="d-flex w-100 justify-content-between">
              <h6 class="mb-1 text-dark" >equals和==的区别是啥</h6>
            </div>
            <div class="row">
              <div class="col-7">
                <small class="mr-2">1条回答</small>
                <small class="text-warning" style="display: none">未回复</small>
                <small class="text-info" style="display: none">未解决</small>
                <small class="text-success">已解决</small>
              </div>
              <div class="col-5 text-right">
                <small>10浏览</small>
              </div>
            </div>
          </a>
        </div>

      </div>
    </div>
  </div>

</div>

<!--底部-->
<footer  class="container-fluid  bg-light mt-1 py-3">
  <p class="text-center font-weight-light">达内教育-Java教研部 版权所有<br><a href="http://tedu.cn" rel="nofollow" target="_blank">京ICP备16053980号-3</a>
  </p>
</footer>
<script>
  $(document).ready(function() {
    $('#summernote').summernote({
      height: 300,
      tabsize: 2,
      lang: 'zh-CN',
      placeholder: '请输入问题的详细描述...'
    });
    $('select').select2({placeholder:'请选择...'});
  });
</script>
</body>
<script src="../js/utils.js"></script>
<script src="../js/question_detail.js"></script>
</html>